<template>
  <div>
    <div class="submitBar" v-show="show">
      <div class="submitBar-left">
        <div class="cart_tag" v-if="!detailShow" @click="detailShow = true">
          <div class="cart">
            <van-icon color="#666" name="bag-o" />
          </div>
          <div class="tag">{{ getCart.totalCount }}</div>
        </div>
        <div class="all_price">￥{{ allPrice }}</div>
      </div>
      <div class="submitBar-right" @click="submitCart">结算</div>
    </div>
    <!-- 遮罩层 -->
    <van-overlay z-index="9" :show="detailShow" @click="detailShow = false">
      <div class="wrapper">
        <div class="wrapper_header">
          <div class="cart_tag" v-if="detailShow" @click="detailShow = true">
            <div class="cart">
              <van-icon color="#666" name="bag-o" />
            </div>
            <div class="tag">{{ getCart.totalCount }}</div>
          </div>
        </div>
        <div class="wrapper_main" @click.stop ref="cart_scroll">
          <div class="wrapper_content">
            <div class="header">
              <van-checkbox
                checked-color="#333"
                v-model="checkedAll"
                @click="selectAll"
                >全选</van-checkbox
              >
              <div class="delete_all" @click="deleteAll">
                <i class="iconfont icon-lajitong1"></i>清空垃圾桶
              </div>
            </div>
            <div class="main">
              <van-checkbox checked-color="#333" disabled v-model="delivery">
                门店到付
                <span class="sign">自提/外送</span>
              </van-checkbox>
              <!-- 购物车列表 -->
              <div class="cart_list">
                <div
                  class="cart_item"
                  v-for="(item, index) in this.getCommodityList"
                  :key="index"
                >
                  <van-checkbox
                    checked-color="#333"
                    v-model="item.selected"
                    @click="changeCheck(item)"
                  ></van-checkbox>
                  <div class="cart_img">
                    <van-image
                      width="100%"
                      height="100%"
                      fit="cover"
                      :src="item.imgUrl"
                    />
                  </div>
                  <div class="name_price">
                    <div>{{ item.commodityName }}</div>
                    <div class="font12g attribute">
                      {{ item.properties }}
                    </div>
                    <div class="price_btn">
                      <div>￥{{ item.price }}</div>
                      <div class="btns">
                        <van-icon name="minus" />
                        <div class="round reduce" @click="reduceNum">
                          <i class="iconfont icon-jian1 icon-font"></i>
                        </div>
                        <div class="num">{{ item.count }}</div>
                        <div class="round add" @click="addNum">
                          <i class="iconfont icon-jia icon-font"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import common from "../../utils/common";
import BScroll from "better-scroll";
import Vue from "vue";
import { Tag, Overlay, Checkbox, Image as VanImage } from "vant";

Vue.use(Tag).use(Overlay).use(Checkbox).use(VanImage);
export default {
  name: "submitBar",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    console.log("checkLogin", this.user);
    if (this.user != null) {
      this.isLogin = true;
    } else {
      this.isLogin = false;
    }
  },
  data() {
    return {
      detailShow: false,
      allPrice: 0,
      isLogin: null,
      cart_scroll: null,
      //到付
      delivery: false,
    };
  },
  computed: {
    getCommodityList() {
      return this.$store.getters.cart.commodityList;
    },
    getCart() {
      return this.$store.getters.cart;
    },
    checkedAll() {
      return this.getCart.selectedGroup == this.getCart.commodityList.length;
    },
    getOrderData() {
      return this.$store.getters.orderData;
    },
    user() {
      return this.$store.getters.userInfo;
    }
  },
  watch: {
    user(newValue, oldVAlue) {
      console.log("触发登录状态监听",newValue)
      if (newValue != null) {
        this.isLogin = true;
      } else {
        this.isLogin = false;
      }
    },
    getCart: {
      handler(newValue, oldValue) {
        this.getAllPrice();
      },
      immediate: true,
      deep: true,
    },
    detailShow(newValue, oldValue) {
      if (newValue) {
        console.log("打开购物车详情", newValue);
        if (this.getCart.commodityList.length >= 4) {
          this.$nextTick(() => {
            this.initSiderScroll();
          });
        }
      }
    },
  },
  methods: {
    // 初始化bs
    initSiderScroll() {
      this.cart_scroll = new BScroll(this.$refs.cart_scroll, {
        click: true,
        scrollY: true,
        bindToWrapper: true,
        probeType: 3,
        scrollbar: {
          fade: true,
        },
      });
      console.log("init", this.cart_scroll);
    },

    addNum() {
      // this.num++;
    },
    reduceNum() {
      // if (this.num == 1) {
      // } else {
      //   this.num--;
      // }
    },

    getAllPrice() {
      this.allPrice = common.getAllPrice(this.getCommodityList);
      console.log("更新总价格", this.allPrice);
    },
    changeCheck(commodity) {
      var cart = this.getCart;
      var index = common.isExist(cart, commodity);
      if (cart.commodityList[index].selected) {
        cart.commodityList[index].selected = true;
        cart.selectedGroup = parseFloat(cart.selectedGroup) + parseInt(1);
      } else {
        cart.commodityList[index].selected = false;
        cart.selectedGroup = parseFloat(cart.selectedGroup) - parseInt(1);
      }
      this.$store.dispatch("setCart", cart);
    },
    selectAll() {
      var cart = this.getCart;
      var list = cart.commodityList;
      console.log("this.checkedAll", this.checkedAll);
      if (this.checkedAll) {
        cart.selectedGroup = 0;
        this.negation(list, false);
      } else {
        cart.selectedGroup = list.length;
        this.negation(list, true);
      }
      this.$store.dispatch("setCart", cart);
    },
    //购物车内商品全选或全反选
    negation(list, flag) {
      for (var i = 0; i < list.length; i++) {
        list[i].selected = flag;
      }
    },
    submitCart() {
      if (!this.isLogin) {
        this.$emit("changeShowLogin");
      } else {
        // 跳转订单结算界面
        this.$store.dispatch("setOrder", {});
        var order = this.getOrderData;
        order.commodityList = common.getSelectedCommodities(
          this.getCart.commodityList
        );
        order.tel = "17816180518";
        console.log("submit!", order);
        this.$store.dispatch("setOrder", order);
        this.$router.push({ path: "payment", params: {} });
      }
    },
    deleteAll() {
      this.$store.dispatch("setCart",{})
    }
  },
};
</script>

<style scoped>
.submitBar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.4rem;
  height: 1.5rem;
  display: flex;
  flex-direction: row;
  background-color: #f0f0f0;
  justify-content: space-between;
  z-index: 10;
}
.submitBar-left {
  display: flex;
  flex-direction: row;
  z-index: 10;
}
.cart {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 100%;
  text-align: center;
  line-height: 1.5rem;
  font-size: 28px;
  background-color: #fff;
  margin: -0.3rem 0rem 0 0.5rem;
}
.tag {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 100%;
  color: #fff;
  background-color: #dba871;
  text-align: center;
  line-height: 0.5rem;
  margin: -1.6rem 0 0 1.5rem;
}
.all_price {
  font-size: 20px;
  color: #333;
  line-height: 1.5rem;
  margin-left: 0.5rem;
}
.submitBar-right {
  width: 3rem;
  line-height: 1.5rem;
  text-align: center;
  font-size: 18px;
  color: #fff;
  background-color: #dba871;
  z-index: 10;
}
.wrapper {
  width: 100%;
  position: absolute;
  bottom: 2.9rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wrapper_header {
  display: flex;
  flex-direction: row;
  height: 1.8rem;
  z-index: 10;
}
.wrapper_main:before {
  content: "";
  position: absolute;
  top: 1.65rem;
  left: 1rem;
  width: 0;
  height: 0;
  border: 0.25rem solid transparent;
  border-bottom-color: #fff;
  border-top: none;
  border-left-color: transparent;
  border-right-color: transparent;
}
.wrapper_main {
  width: 100%;
  overflow: hidden;
  min-height: 25vh;
  max-height: 55vh;
  background-color: #fff;
  border-radius: 0.3rem 0.3rem 0 0;
  box-sizing: border-box;
}
.wrapper_content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}
.wrapper_content .header {
  width: 100%;
  height: 5vh;
  line-height: 5vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 0.5rem;
  border-bottom: 1px solid #e1e1e1;
  box-sizing: border-box;
}
.wrapper_content .header .delete_all {
  color: grey;
}
.wrapper_content .header .delete_all i {
  margin-right: 0.1rem;
}
.wrapper_content .main {
  padding: 0.2rem 0.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.main .sign {
  margin-left: 0.3rem;
  font-size: 10px;
  color: #dba871;
  min-width: 2rem;
  padding: 0 0.1rem;
  height: 0.5rem;
  border: 1px solid #dba871;
}
.cart_list {
  display: flex;
  flex-direction: column;
}
.cart_list ::v-deep .van-checkbox {
  width: 0.75rem;
}
.cart_item {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 2.5rem;
  box-sizing: border-box;
}
.cart_img {
  width: 2rem;
  padding: 0.3rem 0;
}
.name_price {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #333;
  font-size: 15px;
  width: 100%;
  border-bottom: 1px solid #e1e1e1;
  padding: 0.3rem 0 0.5rem 0;
}
.name_price .attribute {
  margin: 0.2rem 0;
}
.name_price .price_btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.name_price .btns {
  display: flex;
  flex-direction: row;
  justify-content: center;
  box-sizing: border-box;
}
.btns .round {
  margin-left: 0.3rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 100%;
  line-height: 0.6rem;
  text-align: center;
}
.btns .reduce {
  border: 1px solid #e1e1e1;
  color: grey;
}
.btns .add {
  background-color: #dba871;
  color: #fff;
}
.btns .num {
  margin-left: 0.3rem;
  line-height: 0.6rem;
  font-size: 16px;
  color: #333;
}
</style>